<!-- 船代设置 -->
<template>
  <div class="shipg-setting">
    <!-- 查询 -->
    <el-row :gutter="15">
      <el-col :span="19">
        <el-form v-model="formData" size="mini" :inline="true" class="demo-form-inline">
          <el-form-item label="船代简称" label-width="70px">
            <el-select v-model="formData.id" filterable @change="parentName" @visible-change="selectShip" placeholder="请选择船代">
              <el-option label="所有船代" value=""></el-option>
              <el-option v-for="(item, index) in boatList" :key="index" :label="item.text" :value="item.shipAgencyId"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="操作员">
            <el-select v-model="formData.theOperatorId" @change="parentName" @visible-change="selectMan" placeholder="请选择操作员">
              <el-option label="全部" value=""></el-option>
              <el-option v-for="item in boxerList" :key="item.id" :label="item.fullName" :value="item.salesmanId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据状态">
            <el-select v-model="formData.boxState" @change="parentName" placeholder="请选择状态">
              <el-option label="全部状态" value=""></el-option>
              <el-option label="启用" value=""></el-option>
              <el-option label="停用" value=""></el-option>
            </el-select>
          </el-form-item> -->
        </el-form>
      </el-col>
      <el-col :span="5">
        <div style="display: flex; justify-content: flex-end; height: 29px;">
          <el-button size="mini" type="success" @click="newship">新增</el-button>
          <el-button type="primary" size="mini" @click="getBoatList(1, 15)">搜索</el-button>
          <el-button size="mini" @click="clearInfo">清空</el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.5)"
      border
      :data="tableData"
      style="width: 100%; overflow-x: auto;">
      <el-table-column
        align="center"
        width="120px"
        label="简码">
        <template slot-scope="scope">
          {{scope.row.shipAgencyCode}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="130px"
        label="船代简称">
        <template slot-scope="scope">
          {{scope.row.shipAgencyName}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="提单号首字母">
        <template slot-scope="scope">
          {{scope.row.match}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        width="140">
        <template slot-scope="scope">
          <el-button size="mini" icon="el-icon-edit" type="primary" @click="editShipg(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="salesman-man-pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageNo"
        :page-sizes="[15, 20, 30]"
        :page-size="number"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <new-ship-generation-dialog :boatList="boatList"></new-ship-generation-dialog>
    <edit-ship-generation-dialog :boatList="boatList" :edit="edit"></edit-ship-generation-dialog>
  </div>
</template>

<script>
import NewShipGenerationDialog from './dialog/NewShipGenerationDialog.vue'
import EditShipGenerationDialog from './dialog/EditShipGenerationDialog.vue'
import { boatAgentMatchList } from './api/customerManagement'
import { shipAgencyList } from '../finance/api/finance'
import { getSalesman } from '../userMan/api/userman.js'
export default {
  components: {
    NewShipGenerationDialog,
    EditShipGenerationDialog
  },
  data () {
    return {
      tableData: [],
      boatList: [],
      boxerList: [],
      uploadData: {},
      editObj: {},
      loading: true,
      pageNo: 1,
      number: 15,
      total: 0,
      edit: '',
      formData: {
        id: '',
        shipAgencyCode: '',
        shipAgencyName: ''
      }
    }
  },
  mounted () {
    this.getBoatList(1, 15)
    this.SearchBoatAgentComData()
  },
  methods: {
    newship () {
      this.$store.commit('show_new_ship_generation_dialog')
    },
    editShipg (e) {
      this.edit = JSON.stringify(e)
      this.$store.commit('show_edit_ship_generation_dialog')
    },
    selectShip (value) {
      let _that = this
      if (value) {
        setTimeout(function () {
          _that.SearchBoatAgentComData()
        }, 500)
      }
    },
    // 封装的调用父组件方法
    parentName (value) {
      const findIndex = this.boatList.findIndex((item) => {
        return item.shipAgencyId === value
      })
      if (findIndex > -1) {
        this.formData.shipAgencyName = this.boatList[findIndex].shipAgencyName
        this.formData.shipAgencyCode = this.boatList[findIndex].code
      } else {
        this.formData.shipAgencyName = ''
        this.formData.shipAgencyCode = ''
      }
      this.getBoatList(this.pageNo, this.number)
    },
    // 获取表格数据
    async getBoatList (pg, nb) {
      this.loading = true
      const res = await boatAgentMatchList({
        shipAgencyName: this.formData.shipAgencyName,
        shipAgencyCode: this.formData.shipAgencyCode,
        curpage: pg,
        pageSize: nb
      })
      if (res.status === 200) {
        this.tableData = res.data
        this.total = res.dataCount
        this.loading = false
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
        this.loading = false
      }
    },
    // 获取船代公司列表
    async SearchBoatAgentComData () {
      const res = await shipAgencyList({})
      if (res.status === 200) {
        this.boatList = res.data
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 获取放箱员列表
    async getBoxerList () {
      const res = await getSalesman({
        nickName: '',
        state: 1,
        userType: 9,
        page: 1,
        num: 10000
      })
      if (res.status === 200) {
        this.boxerList = res.data
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    clearInfo () {
      this.formData.id = ''
      this.formData.shipAgencyCode = ''
      this.formData.shipAgencyName = ''
    },
    handleCurrentChange (val) {
      this.getBoatList(val, this.number)
      this.pageNo = val
    },
    // 每页条数
    handleSizeChange (val) {
      this.getBoatList(this.pageNo, val)
      this.number = val
    }
  }
}
</script>

<style lang="less">
  .fitler{
    .el-tag{
      cursor: pointer;
    }
  }
  .salesman-man-pagination {
    width: 100%;
    margin: 0 auto;
    margin-top: 10px;
  }
</style>
